import React, { useState, useEffect } from 'react';
import { Card, Layout, Menu, Pagination } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom'
import { menuItems } from './constant';
import Sider from 'antd/es/layout/Sider';
import { Content, Header } from 'antd/es/layout/layout';
import { HomeOutlined } from '@ant-design/icons';
import './index.less';

interface IProps { }

const Editor: React.FC<IProps> = () => {
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(1);
  const [currentMenu, setCurrentMenu] = useState('news');
  const itemsPerPage = 10; // 每页显示的新闻数量

  return (
    <div className="editor-container">
      <Layout style={{ height: '100%' }}>
        <Header>
          <div style={{ display: 'flex', height: '100%', cursor: 'pointer' }} onClick={() => {
            window.location.hash = '#/'
          }}>
            <HomeOutlined style={{ fontSize: '40px', color: 'white' }} />
          </div>
        </Header>
        <Layout>
          <Sider theme='light'>
            <Menu
              mode='inline'
              selectedKeys={[currentMenu]}
              onSelect={info => {
                // keyPath 数组的最后一个为一级菜单，之前为二级菜单
                const { keyPath } = info;
                if (keyPath) {
                  const routePathLength = keyPath.length;
                  const hash = keyPath[keyPath.length - 1];
                  if (routePathLength > 1) {
                    const param = keyPath[0].split('-')[1];
                    window.location.hash = `#/editor/${hash}?type=${param}`;
                    return;
                  }
                  window.location.hash = `#/${hash}`;
                  return;
                }
                setCurrentMenu(info.key);
              }}
              items={menuItems as any}>
            </Menu>
          </Sider>
          <Content>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  );
};

export default Editor;